<!DOCTYPE html>
<html lang="en" ng-app="ui.bootstrap.demo" id="top">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="icon" href="assets/favicon.ico" />
    <title>Angular directives for Bootstrap</title>
    <meta name="description" content="AngularJS (Angular) native directives for Bootstrap. Small footprint (5kB gzipped!), no 3rd party JS dependencies (jQuery, bootstrap JS) required! Widgets: <% demoModules.forEach(function(module) { %><%= module.displayName %>, <% }); %>">
    <meta name="google-site-verification" content="7lc5HyceLDqpV_6oNHteYFfxDJH7-S3DwnJKtNUKcRg" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.0.0/FileSaver.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-touch.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-sanitize.js"></script>
    <script src="ui-bootstrap-tpls-<%= pkg.version%>.min.js"></script>
    <script src="assets/plunker.js"></script>
    <script src="assets/app.js"></script>

    <link href="//netdna.bootstrapcdn.com/bootstrap/<%= bsversion %>/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="assets/rainbow.css"/>
    <link rel="stylesheet" href="assets/demo.css"/>
    <link rel="author" href="https://github.com/angular-ui/bootstrap/graphs/contributors">
</head>
<body class="ng-cloak" ng-controller="MainCtrl">
<header class="navbar navbar-default navbar-fixed-top navbar-inner">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" ng-click="isCollapsed = !isCollapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand visible-xs" href="#">UI Bootstrap</a>
        </div>
        <nav class="hidden-xs">
            <ul class="nav navbar-nav">
                <a href="#top" role="button" class="navbar-brand">
                    UI Bootstrap
                </a>
                <li class="dropdown" uib-dropdown>
                    <a role="button" class="dropdown-toggle" uib-dropdown-toggle>
                        Directives <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <% demoModules.forEach(function(module) {  %><li><a href="#<%= module.name %>"><%= module.displayName %></a></li><% }); %>
                    </ul>
                </li>
                <li><a href="#getting_started">Getting started</a></li>
                <li class="dropdown" uib-dropdown>
                    <a role="button" class="dropdown-toggle" uib-dropdown-toggle>
                        Previous docs <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li ng-repeat="version in oldDocs">
                            <a ng-href="{{version.url}}">{{version.version}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
        <nav class="visible-xs" uib-collapse="!isCollapsed">
            <ul class="nav navbar-nav">
                <li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
                <li><a href="#directives_small" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
            </ul>
        </nav>
    </div>
</header>
<div class="header-placeholder"></div>
<div role="main">
    <header class="bs-header text-center" id="overview">
        <div class="container">
            <h1>
                UI Bootstrap
            </h1>

            <p>Bootstrap components written in pure <a href="http://angularjs.org">AngularJS</a> by the <a
                    href="http://angular-ui.github.io">AngularUI Team</a></p>

            <p>
                <a class="btn btn-outline-inverse btn-lg" href="https://github.com/angular-ui/bootstrap"><i class="icon-github"></i>Code on Github</a>
                <button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showDownloadModal()">
                    <i class="glyphicon glyphicon-download-alt"></i> Download <small>(<%= pkg.version%>)</small>
                </button>
                <button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showBuildModal()"><i class="glyphicon glyphicon-wrench"></i> Create a Build</button>
            </p>
        </div>
        <div class="bs-social container">
            <ul class="bs-social-buttons">
                <li>
                    <iframe src="//ghbtns.com/github-btn.html?user=angular-ui&repo=bootstrap&type=watch&count=true"
                            allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
                </li>
                <li>
                    <iframe src="//ghbtns.com/github-btn.html?user=angular-ui&repo=bootstrap&type=fork&count=true"
                            allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
                </li>
                <li>
                    <a href="https://twitter.com/share" class="twitter-share-button"
                       data-hashtags="angularjs">Tweet</a>
                    <script>!function (d, s, id) {
                        var js, fjs = d.getElementsByTagName(s)[0];
                        if (!d.getElementById(id)) {
                            js = d.createElement(s);
                            js.id = id;
                            js.src = "//platform.twitter.com/widgets.js";
                            fjs.parentNode.insertBefore(js, fjs);
                        }
                    }(document, "script", "twitter-wjs");</script>
                </li>
                <li>
                    <!-- Place this tag where you want the +1 button to render. -->
                    <div class="g-plusone" data-size="medium"></div>

                    <!-- Place this tag after the last +1 button tag. -->
                    <script type="text/javascript">
                        (function () {
                            var po = document.createElement('script');
                            po.type = 'text/javascript';
                            po.async = true;
                            po.src = 'https://apis.google.com/js/plusone.js';
                            var s = document.getElementsByTagName('script')[0];
                            s.parentNode.insertBefore(po, s);
                        })();
                    </script>
                </li>
            </ul>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <section class="bs-sidebar visible-xs" id="directives_small">
                    <ul class="nav bs-sidenav">
                        <li><a href="#"><strong>Directives</strong></a></li>
                        <% demoModules.forEach(function(module) {  %>
                            <li><a href="#<%= module.name %>"><%= module.displayName %></a></li>
                        <% }); %>
                    </ul>
                </section>

                <section id="getting_started">
                    <div class="page-header">
                        <h1>Getting started</h1>
                    </div>
                    <h3>Angular 2</h3>
                    <p>
                        For Angular 2 support, check out
                        <a href="https://ng-bootstrap.github.io" target="_blank">
                          ng-bootstrap
                        </a>, created by the UI Bootstrap team.
                    </p>
                    <h3>Dependencies</h3>
                    <p>
                        This repository contains a set of <strong>native AngularJS directives</strong> based on
                        Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's
                        JavaScript is required. The <strong>only required dependencies</strong> are:
                    </p>
                    <ul>
                        <li><a href="http://angularjs.org" target="_blank">AngularJS</a> (requires AngularJS 1.4.x or higher, tested with <%= ngversion %>).
                            0.14.3 is the last version of this library that supports AngularJS 1.3.x and
                            0.12.0 is the last version that supports AngularJS 1.2.x.</li>
                        <li><a href="http://angularjs.org" target="_blank">Angular-animate</a> (the version should match with your angular's, tested with <%= ngversion %>) if you plan in using animations, you need to load angular-animate as well.</li>
                        <li><a href="http://angularjs.org" target="_blank">Angular-touch</a> (the version should match with your angular's, tested with <%= ngversion %>) if you plan in using swipe actions, you need to load angular-touch as well.</li>
                        <li><a href="http://getbootstrap.com" target="_blank">Bootstrap CSS</a> (tested with version <%= bsversion %>).
                            This version of the library (<%= pkg.version%>) works only with Bootstrap CSS in version 3.x.
                            0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.
                        </li>
                    </ul>
                    <h3>Files to download</h3>
                    <p>
                        Build files for all directives are distributed in several flavours: minified for production usage, un-minified
                        for development, with or without templates. All the options are described and can be
                        <a href="https://github.com/angular-ui/bootstrap/tree/gh-pages">downloaded from here</a>. It should be noted that the <code>-tpls</code> files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ <a href="https://github.com/angular-ui/bootstrap/wiki/FAQ#full-explanation">here</a> and the README <a href="https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files">here</a>.
                    </p>
                    <p>Alternativelly, if you are only interested in a subset of directives, you can
                        <a ng-click="showBuildModal()">create your own build</a>.
                    </p>
                    <p>Whichever method you choose the good news that the overall size of a download is fairly small:
                       122K minified for all directives with templates and 98K without (~31kB with gzip
                        compression, with templates, and 28K gzipped without)</p>
                    <h3>Installation</h3>
                    <p>As soon as you've got all the files downloaded and included in your page you just need to declare
                       a dependency on the <code>ui.bootstrap</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
                       <pre><code>angular.module('myModule', ['ui.bootstrap']);</code></pre>
                    </p>
                    <p>If you are using UI Bootstrap in the CSP mode, e.g. in an extension, make sure you link to the <code>ui-bootstrap-csp.css</code> in your HTML manually.</p>
                    <p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>
                    <h3>Migration to prefixes</h3>
                    <p>Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier,
                    check our <a href="https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes">migration guide</a>.</p>
                    <h3>CSS</h3>
                    <p>Original Bootstrap's CSS depends on empty <code>href</code> attributes to style cursors for several components (pagination, tabs etc.).
                    But in AngularJS adding empty <code>href</code> attributes to link tags will cause unwanted route changes. This is why we need to remove empty <code>href</code> attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application: <pre><code>.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }</code></pre>
                    </p>
                    <h3>FAQ</h3>
                    <p>Please check <a href="https://github.com/angular-ui/bootstrap/wiki/FAQ" target="_blank">our FAQ section</a> for common problems / solutions.</p>
                    <h3>Reading the documentation</h3>
                    <p>
                        Each of the components provided in <code>ui-bootstrap</code> have documentation and interactive Plunker examples.
                    </p>
                    <p>
                        For the directives, we list the different attributes with their default values. In addition to this, some settings have a badge on it:

                        <ul>
                            <li><i class="glyphicon glyphicon-eye-open"></i> - This setting has an angular $watch listener applied to it.</li>
                            <li><small class="badge">B</small> - This setting is a boolean. It doesn't need a parameter.</li>
                            <li><small class="badge">C</small> - This setting can be configured globally in a constant service*.</li>
                            <li><small class="badge">$</small> - This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.</li>
                            <li><small class="badge">readonly</small> - This setting is readonly.</li>
                        </ul>
                    </p>
                    <p>
                        For the services (you will recognize them with the <code>$</code> prefix), we list all the possible parameters you can pass to them and their default values if any.
                    </p>
                    <p>
                        * Some directives have a config service that follows the next pattern: <code>uibDirectiveConfig</code>. The service's settings use camel case. The services can be configured in a <code>.config</code> function for example.
                    </p>
                </section>
                <% demoModules.forEach(function(module) { %>
                    <section id="<%= module.name %>">
                        <div class="page-header">
                          <h1><%= module.displayName %><small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/<%= module.name %>">ui.bootstrap.<%= module.name %></a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <%= module.docs.html %>
                            </div>
                            <div class="col-md-6">
                                <%= module.docs.md %>
                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('<%= ngversion%>', '<%= bsversion %>', '<%= pkg.version%>', '<%= module.name %>')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable><code data-language="html"><%- module.docs.html %></code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable><code data-language="javascript"><%- module.docs.js %></code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script><%= module.docs.js %></script>
                <% }); %>
            </div>
        </div>
    </div><!-- /.container -->
</div><!-- /.main -->
<footer class="footer">
    <div class="container">
        <p>Designed and built by all ui-bootstrap <a href="https://github.com/angular-ui/bootstrap/graphs/contributors" target="_blank">contributors</a>.</p>
        <p>Code licensed under <a href="https://github.com/angular-ui/bootstrap/blob/master/LICENSE"><%= pkg.license %> License</a>.</p>
        <p><a href="https://github.com/angular-ui/bootstrap/issues?state=open">Issues</a></p>
    </div>
</footer>
<script src="assets/rainbow.js"></script>
<script src="assets/rainbow-generic.js"></script>
<script src="assets/rainbow-javascript.js"></script>
<script src="assets/rainbow-html.js"></script>
<script type="text/ng-template" id="downloadModal.html">
    <div class="modal-header"><h4 class="modal-title">Download Angular UI Bootstrap</h4></div>
    <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-3 control-label"><strong>Build</strong></label>
            <div class="col-sm-9">
              <span class="btn-group">
                <button type="button" class="btn btn-default" ng-model="options.minified" uib-btn-radio="true">Minified</button>
                <button type="button" class="btn btn-default" ng-model="options.minified" uib-btn-radio="false">Uncompressed</button>
              </span>
              <small class="help-block">Use <b>Minified</b> version in your deployed application. <b>Uncompressed</b> source code is useful only for debugging and development purpose.</small>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label"><strong>Include Templates</strong></label>
            <div class="col-sm-9">
              <span class="btn-group">
                <button type="button" class="btn btn-default" ng-model="options.tpls" uib-btn-radio="true">Yes</button>
                <button type="button" class="btn btn-default" ng-model="options.tpls" uib-btn-radio="false">No</button>
              </span>
              <small class="help-block">Whether you want to include the <i>default templates</i>, bundled with most of the directives. These templates are based on Bootstrap's markup and CSS.</small>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label"><strong>npm</strong></label>
            <div class="col-sm-9">
              <pre style="margin-bottom:0;">npm install angular-ui-bootstrap</pre>
              <small class="help-block"><a href="https://www.npmjs.com/" target="_blank">npm</a> is a package manager for the web.</small>
            </div>
          </div>
        </form>
    </div>
    <div class="modal-footer">
        <a class="btn btn-default" ng-click="cancel()">Close</a>
        <a class="btn btn-primary" ng-href="{{download('<%= pkg.version%>')}}" download><i class="glyphicon glyphicon-download-alt"></i> Download <%= pkg.version %></a>
    </div>
</script>
<script type="text/ng-template" id="buildModal.html">
    <div class="modal-header">
      <h4>
      Create a Custom Build
      <br>
      <small>Select the modules you wish to download</small>
      </h4>
    </div>
    <div class="modal-body">
        <div ng-show="isOldBrowser()">
            Your current browser doesn't support creating custom builds.
            Please take a second to <a href="http://browsehappy.com/">upgrade to a
            more modern browser</a> (other than Safari).
        </div>
        <div ng-show="buildErrorText">
            <h4 style="text-align: center;">{{buildErrorText}}</h4>
        </div>
        <div ng-hide="buildErrorText || isOldBrowser()">
            <% modules.forEach(function(module,i) { %>
              <% if (i % 3 === 0) {%>
                <div class="btn-group" style="width: 100%;">
              <% } %>
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.<%= module.name %>}"
               ng-model="module.<%= module.name %>"
               uib-btn-checkbox
               ng-change="selectedChanged('<%= module.name %>', module.<%= module.name %>)">
                  <%= module.displayName %>
              </button>
              <% if ((i+1) % 3 === 0) { //end button group%>
                </div>
              <% } %>
            <% }); %>
        </div>
    </div>
    <div class="modal-footer">
        <a class="btn btn-default" ng-click="cancel()">Close</a>
        <a class="btn btn-primary" ng-hide="isOldBrowser()"
            ng-disabled="isOldBrowser() !== false && !selectedModules.length"
            ng-click="selectedModules.length && build(selectedModules, '<%= pkg.version %>')">
            <i class="glyphicon glyphicon-download-alt"></i> Download {{selectedModules.length}} Modules
        </a>
    </div>
</script>

<script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-37467169-1']);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

</script>
<script src="assets/smoothscroll-angular-custom.js"></script>
<script src="assets/uglifyjs.js"></script>
</body>
</html>
